<template>
  <div class="app-container">
    <form-exceptions-filter @on-filter="submitFilterForm"/>
    <el-table border :data="tableData.list" v-loading="loading" element-loading-text="加载中..." class="el-table-align-center">
      <el-table-column label="到账时间" prop="addTime" width="180">
        <template slot-scope="{row}">
          {{row.createTime | toTime}}
        </template>
      </el-table-column>
      <el-table-column label="到账金额" prop="amount">
      </el-table-column>
      <el-table-column label="附言" prop="keyword">
      </el-table-column>
      <el-table-column label="付款银行" prop="payBankName">
      </el-table-column>
      <el-table-column label="付款账号" prop="payCardNo">
      </el-table-column>
      <el-table-column label="付款人" prop="payName">
      </el-table-column>
      <el-table-column label="收款银行" prop="recvBankName">
      </el-table-column>
      <el-table-column label="收款账号" prop="recvCardNo">
      </el-table-column>
      <el-table-column label="收款人" prop="recvName">
      </el-table-column>
      <el-table-column label="处理人" prop="operator">
      </el-table-column>
      <el-table-column label="备注" prop="remark">
      </el-table-column>
      <el-table-column label="状态" prop="status">
        <template slot-scope="{row}">
          {{getLabel(row.status,consts.EXCEPTION_STATUS)}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="{row}">
          <el-button type="warning"
                     size="mini"
                     @click="openDialog({dialogName: 'exception-handle-dialog',
                      props: row
                     })"
                     v-if="row.status < 1 && roleCheck('exception-recharge-deal')">处理
          </el-button>
          <span v-else>-</span>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination background @size-change="gridSizeChange" @current-change="gridCurrentChange"
                     :current-page="filters.page" :page-sizes="gridPageSize" :page-size="filters.size"
                     :layout="gridLayout" :total="tableData.total">
      </el-pagination>
    </div>
    <exception-handle-dialog v-if="dialogName === 'exception-handle-dialog'"
                          v-model="dialogVisible"
                          :id="dialogProps.id"
                          @submit="submitFinished"/>
  </div>
</template>


<script>

// components
import FormExceptionsFilter from './formExceptionsFilter';
import ExceptionHandleDialog from './exceptionHandleDialog';

// services
import { getRechargeExceptions } from '@/services/api/recharge';

// mixins
import { grid, constsLabel, dialog } from '@/build';


export default {
  name: 'exceptions',
  components: { ExceptionHandleDialog, FormExceptionsFilter },
  mixins: [grid, constsLabel, dialog],
  data() {
    return {
      tableData: {},
      filters: {},
      dialogVisible: false,
    };
  },
  methods: {
    submitFilterForm(formInline) {
      this.filters = { ...this.filters, ...formInline };
      this.gridSearch();
    },
  },
  mounted() {
    this.bindGet(getRechargeExceptions, 'tableData', {
      action: 'getGrid',
      sendingData: 'filters',
    });
    this.getAll();
  },
};
</script>

<style scoped>

</style>
